<template>
	<view class="account">
		<view class="top">
			<button @click="show = true">添加收货地址</button>
			<h3>配送地址</h3>
			<view class='radiogroup'>
				<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange"
					v-for="(item, index) in radiolist1" :key="index">
					<u-radio :customStyle="{marginBottom: '8px'}" :label="item.realname" :name="item.realname"
						@change="radioChange">
						{{item.realname}}--
						{{item.phone}}--
						{{item.address}}
					</u-radio>
				</u-radio-group>
			</view>

		</view>
		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view class="addresslist">  
				<p><span>用户名:</span><input type="text" v-model="userlist.realname"></p>
				<h5 v-show="notshow1">用户名不能为空</h5>
				<p><span>手机号:</span><input type="text" v-model="userlist.phone"></p>
				<h5 v-show="notshow2">手机号不能为空</h5>
				<p><span>地址:</span><input type="text" v-model="userlist.address"></p>
				<h5 v-show="notshow3">地址不能为空</h5>
				<button class="yesadd" @click="yesadd">确定</button>
			</view>
		</u-popup>
		<view class="main">
			<h3>我的订单</h3>
			<view>
				<view v-for="(item,index) in this.$store.state.shopCar" :key="index">
					<uni-list-chat :title="item.foodname"
						avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" badge-positon="left">
						<view class="chat-custom-right">
							<text class="chat-custom-text">数量：{{item.maxcount}}</text>
						</view>
					</uni-list-chat>
				</view>
				<u-button v-show="this.$store.state.shopCar.length" text="结算" type="primary"
					style="width: 80px; float: right; margin:10px 10px 0 0 ;" @click="goOrder"></u-button>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				// 基本案列数据
				radiolist1: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '苹果',
				show: false,
				notshow1: false,
				notshow2: false,
				notshow3: false,
				userlist: {
					realname: '',
					phone: '',
					address: '',
					username: ''
				},
			};
		},
		onLoad() {
			this.getAddress()
		},

		methods: {
			getAddress() {
				uni.request({
					url: "http://10.31.67.9:8002/admin/usersaddress",
					method: "GET",
					data: {
						username: uni.getStorageSync("name")
					},
					success: (res) => {
						this.radiolist1 = res.data
						console.log(res.data);
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				// console.log('radioChange', n);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			change(e) {
				console.log('change', e);
			},
			yesadd() {
				uni.request({
					url: "http://10.31.67.9:8002/admin/addaddress",
					method: "POST",
					data: {
						realname: this.userlist.realname,
						phone: this.userlist.phone,
						address: this.userlist.address,
						username: uni.getStorageSync("name")
					},
					success: (res) => {
						if (this.userlist.realname == '') {
							this.notshow1 = true
						} else {
							this.notshow1 = false
						}
						if (this.userlist.phone == '') {
							this.notshow2 = true
						} else {
							this.notshow2 = false
						}
						if (this.userlist.address == '') {
							this.notshow3 = true
						} else {
							this.notshow3 = false
							this.show = false
							this.radiolist1.push(this.userlist)
							this.userlist = {
								realname: '',
								phone: '',
								address: '',
								username: ""
							}
						}
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			goOrder() {
				this.$store.commit('GenerateOrder')
				uni.switchTab({
					url:'/pages/order/order'
				})
			}
		}, 
	}
</script>



<style lang="scss" scoped>
	.account {
		width: 100%;
		height: 100%;

		.top {
			width: 100%;
			height: 300rpx;
			display: flex;
			flex-direction: column;

			button {
				width: 40%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 34rpx;
				background: #5cb85c;
				margin: 2%;
			}

			h3 {
				width: 100%;
			}

			.radiogroup {
				width: 100%;
				height: 150rpx;
				overflow-y: scroll;
			}
		}

		.addresslist {
			width: 700rpx;
			height: 900rpx;
			background: white;
			display: flex;
			flex-direction: column;

			p {
				width: 100%;
				height: 80rpx;
				margin: 5% 0;
				display: flex;

				span {
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				input {
					width: 66%;
					height: 60%;
					margin-top: 2%;
					border: 1px solid #000;
				}
			}

			h5 {
				margin-top: -5%;
				font-weight: normal;
				font-size: 24rpx;
				width: 66%;
				margin-left: 30%;
			}
		}
	}
</style>